<template>
    <div class="chooser">
        <span v-for="(item,index) in selections" :class="{on:nowIndex===index}" @click="chosenSelection(index)">{{item.label}}</span>
    </div>
</template>

<script>
export default {
    data() {
        return {
            nowIndex: 0
        }
    },
    props: {
        selections: {
            type: Array,
            default: [{
                label: 'test',
                value: 0
            }]
        }
    },
    methods: {
        chosenSelection(index) {
            this.nowIndex = index
            this.$emit('on-change', this.selections[index])
        }
    }
}
</script>

<style scoped>
.chooser span {
    padding: 5px 25px;
    border: 1px solid #e3e3e3;
    margin-right: 10px;
    text-align: center;
    cursor: pointer;
}

.chooser span.on {
    background: #4fc08d;
    color: #fff;
    border: 1px solid #4fc08d;
}
</style>
